<template>
	<view class="luckdraw">
		<alerts ref="alerts" id="alerts" @onemore="againFun" />
		<image class="luckdrawbg" :src="IMGLink + '/activities/luckdraw/cj_bg.png'" mode="widthFix"></image>
		<view class="luckdrawbox">
			<view class="bi">{{names.coin}}：{{userinfo.user_virtual_coin | toFixedZero}}</view>
			<view class="rule" @click="goRule">抽奖规则</view>

			<uni-notice-bar v-if="noticeText" background-color="rgba(255, 255, 255, .17)" color="white" :speed="20"
				:showIcon="true" scrollable="true" single="true" :text="noticeText">
			</uni-notice-bar>

			<image class="cj_tit" :src="IMGLink + '/activities/luckdraw/cj_tit.png'" mode="widthFix"></image>
			<view class="cj_time">
				<text style="display: block;">{{names.name}}大转盘，每天来转一转红包拿不停</text>
				<text style="display: block;"
					v-if="luckdrawObj && luckdrawObj.drawActivityBeginTime && luckdrawObj.drawActivityEndTime">{{luckdrawObj.drawActivityBeginTime}}
					~ {{luckdrawObj.drawActivityEndTime}}</text>
			</view>
			<view class="cj_dp" v-if="luckdrawObj && luckdrawObj.drawGoodsList && luckdrawObj.drawGoodsList.length > 0">
				<image class="cj_dp_bg" :src="IMGLink + '/activities/luckdraw/cj_zp.png'" mode="widthFix"></image>

				<view class="cj_dp_box">
					<view class="cj_goods_box"
						:style="{transition: transitionText == '' ? 'transform .4s' : transitionText,transform: transfromTxt}">
						<image class="cj_p1" :src="IMGLink + '/activities/luckdraw/cj_p1.png'" mode="widthFix"></image>
						<view class="goods_item" v-for="(item, index) in luckdrawObj.drawGoodsList" :key="item.id"
							:style="'transform: translate(-50%, 0) rotate(' + (index * 45 + 22.5) + 'deg)'">
							<view style="margin: 75rpx auto 0;">{{item.name}}</view>
							<image class="goods_img" :src="item.image_url"></image>
						</view>
					</view>
					<image @click="draw" class="cj_zz_d" :src="IMGLink + '/activities/luckdraw/cj_zz.png'"
						mode="widthFix">
					</image>

					<view class="cj_ts" v-if="luckdrawObj.drawActivityCost">注意：抽奖一次消耗{{luckdrawObj.drawActivityCost}}{{names.coin}}
					</view>
				</view>
			</view>

			<view class="ts">
				本活动最终解释权归本公司所有
			</view>
		</view>
	</view>
</template>

<script>
	import {
		name_config
	} from "@/common/config.js"
	import {
		mapState
	} from 'vuex'
	import alerts from "./drawalert.vue"
	import {
		getLGgoods,
		luckdraw,
		gpdata
	} from "@/api/act/luckdraw.js"
	export default {
		components: {
			alerts
		},
		data() {
			return {
				names: name_config,
				IMGLink: this.IMGLink,
				gp: null,
				kong: "　",
				noticeText: null,
				canClick: true,
				transitionText: "",
				transfromTxt: "rotate(0deg)",
				luckdrawObj: null
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		async onShow() {
			let res = await getLGgoods()
			this.luckdrawObj = res.data
			if (+this.luckdrawObj.drawActivityStatus !== 1) {
				uni.showModal({
					title: '提示',
					content: '本活动已结束，请关注系统公告参与其他活动',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							uni.navigateBack()
						}
					}
				});
				return
			}
			// this.gpFun()
			let _gp = await gpdata()
			if(_gp.code == 200) {
				let gp = _gp.data
				this.gpHandle(gp)
			}
		},
		methods: {
			draw() {
				if (+this.userinfo.user_virtual_coin < +this.luckdrawObj.drawActivityCost) {
					uni.showToast({
						icon: 'none',
						duration: 3000,
						title: `**币不足${this.luckdrawObj.drawActivityCost}`
					});
					return
				}
				if (!this.canClick) {
					return
				}
				this.canClick = false
				let quan = 20
				this.reduceCoin()
				luckdraw().then(res => {
					let deg = -((+res.data.prize_id - 1) * 45 + 22.5 + quan * 360)
					this.transfromTxt = `rotate(${deg}deg)`
					this.transitionText = "transform 4s ease-in-out"
					setTimeout(() => {
						this.$refs.alerts.showFun(res.data)
						this.$store.dispatch("updateUserInfo")
						this.canClick = true
						this.resetFun()
					}, 4500)
				}).catch(err => {})
			},
			reduceCoin() {
				this.userinfo.user_virtual_coin -= this.luckdrawObj.drawActivityCost
				this.$store.commit("setUserInfo", this.userinfo)
			},
			/**
			 * 
			 * 重置
			 * */
			resetFun() {
				setTimeout(() => {
					this.transfromTxt = "rotate(0deg)"
					this.transitionText = "transform .1s"
				}, 0)
			},
			/**
			 * 再抽一次
			 * 
			 * */
			againFun() {
				this.draw()
			},
			gpHandle(data) {
				let kong = "　⁣⁣⁣⁣",
					text = "";
				data.map(item => {
					text += `${kong.repeat(20)}恭喜${item.nickname}获得${item.name}`
				})
				this.noticeText = text
			},
			goRule(){
				wx.navigateTo({
					url:`/pagesA/my/rules/ruleDetail?type=19`
				})
			},
		}
	}
</script>
<style>
	page{width: 100%;height: 100%;}
</style>
<style scoped>
	.luckdraw {
		width: 100%;
		height: auto;
		min-height: 100%;
		position: relative;
		background-color: #cf23e7;
	}

	.luckdrawbg {
		display: block;
		height: 100%;
		width: 100%;
	}

	.luckdrawbox {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.bi {
		position: absolute;
		top: 90rpx;
		left: 0;
		width: auto;
		height: 80rpx;
		line-height: 80rpx;
		background-color: rgba(0, 0, 0, .6);
		color: white;
		font-size: 28rpx;
		text-align: center;
		padding: 0 40rpx;
		border-top-right-radius: 80rpx;
		border-bottom-right-radius: 80rpx;
	}

	.rule {
		position: absolute;
		top: 90rpx;
		right: 0;
		width: auto;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 20rpx;
		text-align: center;
		font-size: 26rpx;
		color: white;
		border-top-left-radius: 60rpx;
		border-bottom-left-radius: 60rpx;
		background: linear-gradient(to right, #f6a957 0%, #f4825d 100%);
	}

	.gb {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 84rpx;
		background-color: rgba(255, 255, 255, .17);
	}

	.cj_tit {
		display: block;
		margin: 120rpx auto 0;
		width: 88.5%;
		height: auto;
	}

	.cj_time {
		text-align: center;
		font-size: 28rpx;
		color: white;
		line-height: 36rpx;
	}

	.cj_dp {
		margin: 46rpx auto 0;
		width: 652rpx;
		height: 754rpx;
		position: relative;
	}

	.cj_dp_bg {
		display: block;
		width: 100%;
		height: auto;
	}

	.cj_dp_box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.cj_p1 {
		position: absolute;
		top: 32rpx;
		left: 50%;
		transform: translate(-50%, 0);
		width: 592rpx;
		height: 592rpx;
		/* transform-origin: center 120rpx; */
	}

	.cj_goods_box {
		width: 652rpx;
		height: 652rpx;
		position: relative;
	}

	.goods_item {
		width: 40%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, 0);
		text-align: center;
		overflow: hidden;
		font-size: 28rpx;
	}

	.cj_goods_box .goods_item:nth-child(odd) {
		color: #8A0848;
	}

	.cj_goods_box .goods_item:nth-child(even) {
		color: white;
	}

	.goods_img {
		position: absolute;
		top: 120rpx;
		left: 50%;
		transform: translate(-50%, 0);
		width: 80rpx;
		height: 80rpx;
	}

	.cj_zz_d {
		position: absolute;
		top: 200rpx;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: 3;
		width: 192rpx;
		height: 216rpx;
	}

	.cj_zz_u {
		position: absolute;
		top: 236rpx;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: 4;
		width: 192rpx;
		height: 180rpx;
	}

	.cj_ts {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: white;
		font-size: 28rpx;
	}

	.ts {
		margin: 80rpx auto 0;
		text-align: center;
		width: 100%;
		font-size: 28rpx;
		color: white;
	}
</style>
